<template>
  <div class="stop-info">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:leave="leave"
      v-bind:css="false"
    >
    <div v-show="showAction"><headInfoTitle ></headInfoTitle></div>
    </transition>
    <div class="box-content">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div class="content" v-show="showAction">
          <div class="content-park">
            <div class="content-park-left" id="content-park-left">
              <p>0200</p>
              <p>已占停车位</p>
              <p>PARKING</p>
            </div>
            <div class="content-park-middle">
              <p><span>/</span>2000</p>
              <p>停车位总数量</p>
              <p>TOTAL PARKING SPOT</p>
            </div>
            <div class="content-park-right">
              <img src="../assets/p.png" alt="" />
            </div>
          </div>
        </div>
      </transition>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div class="state" v-show="showAction">
          <div id="stateChart"></div>
        </div>
      </transition>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div  v-show="showAction">
          <div class="car">
            <div class="car-info">
              <img src="../assets/car1.png" alt="" />
              <div class="car-info-detail">
                <p>125</p>
                <p>自行车停车位</p>
                <p>BIKE</p>
              </div>
            </div>
            <div class="car-info">
              <img src="../assets/car2.png" alt="" />
              <div class="car-info-detail">
                <p>58</p>
                <p>摩托车停车位</p>
                <p>MOTOBIKE</p>
              </div>
            </div>
            <div class="car-info">
              <img src="../assets/car3.png" alt="" />
              <div class="car-info-detail">
                <p>228</p>
                <p>Qa汽车停车位t</p>
                <p>CARS</p>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div class="wave" v-show="showAction">
          <div class="wave-head">
            <div class="wave-head-left">
              <img src="../assets/cylinder.png" alt="" />
              <p class="left-text">AM</p>
              <img src="../assets/arrow.png" alt="" />
            </div>
            <div class="wave-head-right">
              <img src="../assets/cylinder.png" alt="" />
              <p class="right-text">PM</p>
            </div>
          </div>
          <div id="wave-echart"></div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import headInfoTitle from "./stopInfo/headInfoTitle";
import { pieOption,elasticOutOption,containLabelOption } from "../tools/echarts";
export default {
  name: "stopInfo",
  data() {
    return {
      isshow: false,
    };
  },
  components: {
    headInfoTitle,
  },
  mounted(){
    setTimeout(()=>{
      this.init()
    },500)
    
  },
  methods: {
    init(){
      pieOption({id:'content-park-left'})
      elasticOutOption({id:'wave-echart'})
      containLabelOption({id:'stateChart'})
    }
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.stop-info {
  height: 100%;
  padding: 0 cwidth(20);
  background: linear-gradient(0deg, #303438, #0d0f0e);
}

.box-content {
  padding-top: cheight(49);
}

.content {
  padding: cheight(32) cwidth(32);
}

.content-park {
  display: flex;
}

.content-park-left {
  /* background: url("../assets/circel.png") no-repeat; */
  width: cwidth(142);
  height: cheight(142);
}

.content-park-left p {
  color: #fff;
  font-weight: bold;
  margin-left: cwidth(32);
}

.content-park-left p:nth-child(1) {
  font-size: 32px;
  margin-top: 40px;
}

.content-park-left p:nth-child(2) {
  font-size: 11px;
}

.content-park-left p:nth-child(3) {
  font-size: 9px;
}

.content-park-middle p:first-child {
  margin-top: 120px;
  font-size: 38px;
  font-weight: bold;
  color: #9ba0a1;
}

.content-park-middle p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #dee3e1;
}

.content-park-middle p:last-child {
  font-size: 11px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #dee3e1;
}

.content-park-right {
  font-size: 32px;
  color: #9ba0a1;
}
.state{
  height: cheight(68);
  #stateChart{
    width: 100%;
    height: cheight(68);
  }
}
.state-data {
  display: flex;
  
}
#wave-echart{
  height: cheight(120);
  width: 100%;
}
.state-data:first-child div {
  font-size: 16px;
  color: #e8e7ea;
}

.state-data:last-child div {
  font-size: 12px;
  color: #e8e7ea;
}

.state-data div:first-child {
  width: 53%;
  text-align: center;
}

.state-data div:nth-child(2) {
  width: 33%;
  text-align: center;
}

.state-data div:last-child {
  width: 24%;
  text-align: center;
}

.car {
  padding-top: 82px;
  display: flex;
  justify-content: space-around;
}

.car-info {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.car-info-detail {
  border-left: 2px solid #75797b;
  padding-left: 4px;
  margin-left: 10px;
  padding-top: 10px;
}

.car-info-detail p {
  word-wrap: break-word;
  word-break: normal;
  font-size: 12px;
  color: #e8e7ea;
}

.wave {
  padding: cheight(65) cwidth(28) cheight(20) cwidth(28);
}

.wave-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wave-head-left {
  font-size: 14px;
  color: #e8e7ea;
  display: flex;
  align-items: center;
}

.wave-head-right {
  font-size: 14px;
  color: #e8e7ea;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.left-text {
  padding: 0 4px;
}

.right-text {
  padding-left: 4px;
}

.wave > img {
  width: 100%;
  padding-top: 6px;
}
</style>
